<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="600px"
    @closed="resetForm('form')"
  >
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <el-form-item label="课程名称" prop="name">
        <el-input v-model.trim="form.name"></el-input>
      </el-form-item>
      <el-form-item label="课程编码" prop="code">
        <el-input v-model.trim="form.code"></el-input>
      </el-form-item>
      <el-form-item label="责任单位名称" prop="deptName">
        <DeptTreeSelect
          v-if="dialogVisible"
          :defaultValue="form.deptName"
          @e-emit="setDept"
        />
      </el-form-item>
      <el-form-item label="培训层次">
        <TrainingSelect
          v-if="dialogVisible"
          :defaultValue="form.trainType"
          @e-trainData="setTrainId"
        />
      </el-form-item>
      <el-form-item label="开设专业">
        <MajorSelect
          v-if="dialogVisible"
          :defaultValue="courseSpecial"
          :deptId="scope"
          :multiple="true"
          @emit="setMajorId"
        />
      </el-form-item>
      <el-form-item label="排序" v-if="addOrEdit != 1">
        <el-input-number
          v-model="form.orderBy"
          :min="1"
          :max="1000"
          size="medium"
          label="排序"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="custom" v-preventReClick @click="submitForm('form')"
        >提 交</el-button
      >
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  sysCourseSourceAdd,
  sysCourseSourceUpdate,
} from '@/api/admin/courseLibrary/sysCourseSource'
import Bus from '@/utils/bus.js'
export default {
  components: {
    DeptTreeSelect: () => import('@/components/dataSelect/deptTreeSelect'),
    TrainingSelect: () => import('@/components/trainingSelect'),
    // MajorSelect: () => import('@/components/dataSelect/majorSelect'),
    MajorSelect: () =>
      import('@/components/dataSelect/majorSelect/MajorTreeSelect'),
  },
  data() {
    return {
      title: '新增',
      dialogVisible: false,
      addOrEdit: 1,
      checkedData: {},
      form: {
        name: '',
        code: '',
        deptName: '',
        deptCode: '',
        orderBy: '',
        type: 1,
        scope: '',
        trainType: '', //培训层次
        courseSpecial: '', //开设该课程的专业
      },
      rules: {
        name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入课程编码', trigger: 'blur' }],
        deptName: [
          { required: true, message: '请选择责任单位名称', trigger: 'blur' },
        ],
      },
      courseSpecial: [],
    }
  },
  watch: {
    scope(v) {
      this.form.scope = v
    },
  },
  props: ['scope'],
  mounted() {
    this.form.scope = this.scope
    Bus.$on('showDialogCourseSourceAdd', (v) => {
      if (v) {
        this.checkedData = v
        this.handleAddOrEdit(2)
      } else {
        this.handleAddOrEdit(1)
      }
    })
  },
  beforeDestroy() {
    Bus.$off('showDialogCourseSourceAdd')
  },
  methods: {
    setDept(v) {
      this.form.deptName = v.name
      this.form.deptCode = v.code
    },
    setTrainId(v) {
      this.form.trainType = v || ''
    },
    setMajorId(v) {
      this.courseSpecial = v
      this.form.courseSpecial = JSON.stringify(v)
    },
    //显示弹窗
    handleAddOrEdit(type) {
      this.courseSpecial = []
      if (type == 2) {
        this.title = '编辑'
        for (let i in this.checkedData) {
          if (this.form.hasOwnProperty(i)) {
            this.form[i] = this.checkedData[i] || ''
          }
        }
        let { courseSpecial } = this.form
        if (courseSpecial) {
          if (courseSpecial.includes('[')) {
            this.courseSpecial = JSON.parse(courseSpecial)
          } else {
            let arr = courseSpecial.split(',')
            arr.forEach((item) => {
              this.courseSpecial.push([item])
            })
          }
        }
        this.form.id = this.checkedData.id
      } else {
        this.title = '新增'
        this.form.orderBy = ''
        delete this.form.id
      }
      this.addOrEdit = type
      this.dialogVisible = true
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.addOrEdit == 1 ? this.add() : this.edit()
        }
      })
    },
    //新增
    add() {
      this.form.courseSpecial = 'dmjsj,dmjx'
      sysCourseSourceAdd(this.form).then((res) => {
        this.dialogVisible = false
        Bus.$emit('refreshCourseSourceList')
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    //编辑
    edit() {
      sysCourseSourceUpdate(this.form).then((res) => {
        this.dialogVisible = false
        Bus.$emit('refreshCourseSourceList')
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    //重置表单
    resetForm(form) {
      this.$refs[form].resetFields()
      this.form.name = ''
      this.form.code = ''
      this.form.deptName = ''
      this.form.deptCode = ''
      this.form.trainType = ''
      this.form.courseSpecial = ''
      this.form.orderBy = ''
      this.form.type = 1
    },
  },
}
</script>